<template>
<div class="container">
    <div class="body-top">
        <div class="top-title">组织机构</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="领导机构" name="first">
                <Leading></Leading>
            </el-tab-pane>
            <el-tab-pane label="组织机构-集团" name="second">
                <Group></Group>
            </el-tab-pane>
            <el-tab-pane label="组织机构-二级公司" name="third">
                <Second-level></Second-level>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script>
import SecondLevel from "./SecondLevel/SecondLevel";
import Group from "./Group/Group";
import Leading from "./Leading/Leading";

export default {
    components: {
        SecondLevel,
        Group,
        Leading
    },
    data() {
        return {
            activeName: "first"
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>

<style lang="less" scoped>
.body-top {
    .top-title {
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
        padding-left: 10px;
    }
}

/**tab-every */
/deep/.el-tabs__item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 22px;
    margin-top: 14px;
}

/**tab底下1px线 */
/deep/.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e4e7ed;
}

/deep/.el-tabs__nav,
.is-top {
    margin-left: 9px;
}

/deep/#tab-second {
    padding-left: 40px;
    padding-right: 40px;
}
</style>
